<template>
  <div class="hello">
    <div v-if="scoreDetail === false">
      <div style="width: 100%">
        <el-button
          size="mini"
          class="btn"
          type="primary"
          @click="addInfo"
          style="position: 'static'"
          >新增</el-button
        >
        <el-form :model="sizeForm" label-width="80px" size="mini">
          <el-select
            v-model="sizeForm.region"
            placeholder="请选择学院"
            @change="collegeChange"
          >
            <el-option
              :label="item.className"
              :value="item.id"
              v-for="(item, index) in collegeList"
              :key="index"
            ></el-option>
          </el-select>
          <el-select
            v-model="sizeForm.className"
            placeholder="请选择班级"
            @visible-change="changeClass"
          >
            <el-option
              :label="item.className"
              :value="item.className"
              v-for="(item, index) in classList"
              :key="index"
            ></el-option>
          </el-select>
          <el-input
            v-model="sizeForm.search"
            class="search"
            placeholder="请输入学生姓名"
          ></el-input>
          <el-button size="mini" type="primary" @click="goSearch"
            >搜索</el-button
          >
          <el-button size="mini" type="primary" @click="clear">清空</el-button>
        </el-form>
      </div>
      <ul class="listTitle">
        <li>班级</li>
        <li>学号</li>
        <li>姓名</li>
        <li>测试成绩</li>
        <li>操作</li>
      </ul>
      <div
        class="boxList"
        v-loading="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0,0,0,0)"
      >
        <ul class="list" v-for="(item, index) in tableData" :key="index">
          <li>{{ item.nation }}</li>
          <li>{{ item.studentid }}</li>
          <li>{{ item.name }}</li>
          <li>{{ item.score }}</li>
          <li>
            <div @click="look(item.studentid)">查看</div>
            <div @click="editInfo(item)">编辑</div>
            <div @click="delInfo(item.studentid)">删除</div>
          </li>
        </ul>
      </div>
      <div v-if="tableData.length === 0">暂无数据</div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="this.dataList.length"
        class="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
      >
      </el-pagination>
    </div>
    <textScoreStudent v-if="scoreDetail === true" @goback="goback" />
    <addDataInforDialog ref="addDialog" @addData="addData" />
    <!-- <editInfoDialog ref="editdataDialog" :dataId="dataId" /> -->
    <el-dialog
      title="学生信息编辑"
      :visible.sync="dialogVisible"
      width="46%"
      :before-close="handleClose"
    >
      <el-form
        label-position="right"
        label-width="120px"
        :model="formLabelAlign"
      >
        <el-form-item label="学号：">
          <el-input v-model="formLabelAlign.number"></el-input>
        </el-form-item>
        <el-form-item label="班级：">
          <el-input v-model="formLabelAlign.class"></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import textScoreStudent from "../components/textScoreStudent";
import addDataInforDialog from "./addDataInforDialog.vue";
import axios from "axios";
import { mapState } from "vuex";

// import editInfoDialog from "./editInfoDialog";
export default {
  data() {
    return {
      scoreDetail: false,
      dataList: [],
      tableData: [],
      dataId: "",
      dialogVisible: false,
      formLabelAlign: {
        number: "",
        class: "",
        name: "",
      },
      sizeForm: {
        region: "",
        className: "",
        search: "",
      },
      collegeList: [],
      classList: [],
      currentPage: 1,
      loading: false,
    };
  },
  components: {
    textScoreStudent,
    addDataInforDialog,
  },
  computed: mapState({
    // dataList(state) {
    //   return state.app.tableList;
    // },
    // tableData() {
    //   return this.dataList.slice(0, 9);
    // },
  }),
  watch: {
    // $route(val) {
    //   console.log(val);
    // },
  },
  methods: {
    postAxios: function () {
      this.loading = true;
      // let studentid=this.$route.query.roleid;//必通过query传参
      let studentid = localStorage.getItem("yh"); //必通过query传参

      console.log(studentid + "++++");
      axios
        .post("/api/user/selectAllStu", {})
        .then((response) => {
          // var newArr = response.data.filter(item => {
          //        if ( studentid=== item.belonger) {
          //          return true
          //        }
          //      })
          this.loading = false;
          console.log(response.data);
          // this.$store.commit("app/setTableList", response.data);
          this.dataList = response.data;
          this.tableData = response.data.slice(
            (this.currentPage - 1) * 9,
            this.currentPage * 9
          );

          //console.log('姓名:  '+this.stus[0].name);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 查询学部
    selectCollege() {
      axios.post("/api/user/select_college", {}).then((res) => {
        this.collegeList = res.data;
      });
    },
    collegeChange() {
      console.log(4444);
      this.sizeForm.className = "";
      this.selectClass();
    },
    // 搜索班级
    changeClass() {
      this.selectClass();
    },
    selectClass() {
      if (this.sizeForm.region === "") {
        this.$message({
          message: "请先选择学部",
          type: "warning",
        });
        return;
      }
      let id = this.sizeForm.region;
      axios
        .post("/api/user/select_class", {
          id,
        })
        .then((res) => {
          this.classList = res.data;
        });
    },
    // 单击搜索
    goSearch() {
      let college = this.sizeForm.region;
      let className = this.sizeForm.className;
      let name = this.sizeForm.search;
      this.loading = true;
      if (college === "" && className === "" && name === "") {
        this.postAxios();
      } else if (className === "" && name === "") {
        axios
          .post("/api/user/select_collegename", {
            college,
          })
          .then((res) => {
            console.log(res);
            this.loading = false;
            this.dataList = res.data;
            this.currentPage = 1;
            this.tableData = res.data.slice(0, 9);
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (college == "" && name === "") {
        axios
          .post("/api/user/select_classname", {
            className,
          })
          .then((res) => {
            console.log(res);
            this.loading = false;
            this.dataList = res.data;
            this.currentPage = 1;
            this.tableData = res.data.slice(0, 9);
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (college === "" && className == "") {
        axios
          .post("/api/user/select_stuname", {
            name,
          })
          .then((res) => {
            console.log(res);
            this.loading = false;
            this.dataList = res.data;
            this.currentPage = 1;
            this.tableData = res.data.slice(0, 9);
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (name === "") {
        axios
          .post("/api/user/select_nationcollege", {
            college,
            className,
          })
          .then((res) => {
            console.log(res);
            this.loading = false;
            this.dataList = res.data;
            this.currentPage = 1;
            this.tableData = res.data.slice(0, 9);
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (className === "") {
        axios
          .post("/api/user/select_namecollege", {
            college,
            name,
          })
          .then((res) => {
            console.log(res);
            this.loading = false;
            this.dataList = res.data;
            this.currentPage = 1;
            this.tableData = res.data.slice(0, 9);
          })
          .catch((err) => {
            console.log(err);
          });
      }
      //  else if (college === "") {
      //   axios
      //     .post("/api/user/select_nationname", {
      //       className,
      //       name,
      //     })
      //     .then((res) => {
      //       console.log(res);
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
      // }
      else {
        axios
          .post("/api/user/select_classmate", {
            college,
            className,
            name,
          })
          .then((res) => {
            console.log(res);
            this.loading = false;
            this.dataList = res.data;
            this.currentPage = 1;
            this.tableData = res.data.slice(0, 9);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 清空
    clear() {
      this.sizeForm = {
        region: "",
        className: "",
        search: "",
      };
      this.postAxios();
    },
    look(val) {
      console.log("val", val);

      localStorage.setItem("belonger", val);
      this.scoreDetail = true;
    },
    goback(e) {
      this.scoreDetail = e;
      this.goSearch();
    },
    addInfo() {
      this.$refs.addDialog.openDialog();
    },
    addData() {
      this.goSearch();
    },
    // 编辑S
    editInfo(e) {
      this.dialogVisible = true;
      this.formLabelAlign.name = e.name;
      this.formLabelAlign.number = e.studentid;
      this.formLabelAlign.class = e.nation;
      this.dataId = e.studentid;
    },
    // 删除
    delInfo(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let studentid = e;
          console.log(studentid);

          axios
            .post("/api/user/deleteStu", {
              studentid,
            })
            .then(() => {
              let belonger = e;
              axios
                .post("/api/user/deleteScore", {
                  belonger,
                })
                .then(() => {
                  this.postAxios();
                });
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClose() {
      this.dialogVisible = false;
      this.$message({
        type: "warning",
        message: "已取消编辑",
      });
    },
    openDialog() {
      this.dialogVisible = true;
    },
    submit() {
      console.log(this.formLabelAlign);
      let studentid = this.formLabelAlign.number;
      let name = this.formLabelAlign.name;
      let nation = this.formLabelAlign.class;
      let studentId = this.dataId;
      console.log(studentid, name, nation, studentId);
      axios
        .post("/api/user/updateStuInfo", {
          studentid,
          name,
          nation,
          studentId,
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "编辑成功",
          });
          axios.post("/api/user/updateStuSco", {
            studentid,
            studentId,
          });
          this.dialogVisible = false;
          this.postAxios();
        });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.tableData = this.dataList.slice(
        (this.currentPage - 1) * 9,
        this.currentPage * 9
      );
    },
  },
  created() {
    this.selectCollege();

    //this.postAxiosrecord();
  },
  mounted() {
    this.postAxios();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {
  width: 100%;
  height: 100%;
  position: relative;
  ul {
    list-style: none;
  }
  /deep/.el-button {
    position: absolute;
    top: 20px;
    left: 30px;
  }
  .listTitle {
    width: 100%;
    height: 54px;
    display: flex;
    margin-top: 10px;
    line-height: 54px;
    font-size: 18px;
    background: rgba(0, 255, 255, 0.6);
    li {
      margin: 0 7.74%;
    }
    li:nth-of-type(5) {
      margin-left: 10.6%;
    }
  }
  .boxList {
    width: 100%;
    height: 74vh;
    overflow: auto;
    .list {
      display: flex;
      height: 44px;
      line-height: 44px;
      padding-bottom: 4px;
      border-bottom: 1px dashed #ccc;
      li {
        width: 200px;
        height: 36px;
        line-height: 36px;
        // background: rgba(0, 255, 255, 0.6);
        margin: 6px 10px 6px 20px;
        font-size: 16px;
      }
      li:nth-of-type(2) {
        margin: 6px 16px 6px 24px;
      }
      li:nth-of-type(4) {
        margin: 6px 38px 6px 40px;
      }
      li:nth-of-type(5) {
        width: 280px;
        display: flex;
        justify-content: center;
        div {
          width: 80px;
          height: 28px;
          font-size: 14px;
          background: cornflowerblue;
          line-height: 28px;
          margin: 2px 10px;
          border-radius: 4px;
          cursor: pointer;
        }
        div:nth-of-type(3) {
          background: crimson;
        }
      }
    }
  }
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
    background: #2a9dff;
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(29, 25, 83, 0.5);
  }
  /deep/ .el-dialog {
    .el-dialog__header {
      background: #143853 !important;
    }
    .el-dialog__title {
      color: #ffffff;
    }
    .el-dialog__body {
      color: #ffffff;
      padding-bottom: 20px;
      background: #0f2d43 !important;
    }
    .el-dialog__footer {
      padding-right: 40px;
      background: #0f2d43;
    }
    .el-form-item__label {
      color: #ffffff;
    }
    .el-input__inner {
      width: 100%;
      background: #0355a4 !important;
      border: none;
      color: #ffffff;
    }
    .el-button {
      position: static;
    }
  }
  .main {
    display: flex;
  }
  /deep/ .el-form {
    .el-select {
      margin-left: 20px;
      .el-input {
        // margin-top: 16px;
        margin: 16px 10px 0;
        outline: none;
      }
    }

    .el-input__inner {
      background: rgba(255, 255, 255, 0.4);
      color: #2a9dff;
    }
    .search {
      width: 20%;
      margin-left: 2%;
    }
    .el-button {
      position: static;
      border-radius: 4px;
      margin-left: 2%;
    }
  }
  .page {
    position: fixed;
    bottom: 6%;
    left: 60%;
  }
}
</style>
